import React, { useState } from 'react';
import ReactFlow, {
  applyEdgeChanges,
  applyNodeChanges,
  addEdge,
  MiniMap,
  Controls,
  Background,
} from 'react-flow-renderer';
import { initNodes, initEdges, nodeTypes } from './config';

const Index = () => {
  const [nodes, setNodes] = useState(initNodes);
  const [edges, setEdges] = useState(initEdges);
  const onNodesChange = (changes) => {
    setNodes((origin) => {
      return applyNodeChanges(changes, origin);
    });
  };
  const onEdgesChange = (changes) => {
    setEdges((origin) => applyEdgeChanges(changes, origin));
  };

  const onConnect = (connection) => setEdges((eds) => addEdge(connection, eds));

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      onConnect={onConnect}
      nodeTypes={nodeTypes}
    >
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
};

export default Index;
